<template>
  <div class="map-box">

    <!-- <div id="container"></div> -->

    <el-amap-search-box
      class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    ></el-amap-search-box>
    <el-amap
      vid="amapDemo"
      :center="mapCenter"
      :zoom="12"
      :plugin="plugin"
      class="amap-demo"
      :events="events"
    >
    </el-amap>

  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    List,
    Icon,
    Popup,
    Dialog
  } from 'vant';
  import { AMapManager } from 'vue-amap';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [List.name]: List,
      [Icon.name]: Icon,
      [Popup.name]: Popup,
      [Dialog.name]: Dialog,
    },
    data() {
      let self = this;
      return {
        // 高德地图实例
        AMapManager: '',
        markers: [],
        currentWindow: {
          pos: [121.59996, 31.197646],
          template: `<button>213213</button>`,
          visible: false,
          content: '123213'
        },
        searchOption: {
          city: '全国',
          citylimit: false
        },
        mapCenter: [121.59996, 31.197646],
        plugin: [{
          pName: 'ToolBar',
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        }],
        events: {
          // 点击地图后显示的标点信息
          click(e) {
            let { lng, lat } = e.lnglat;
            self.lng = lng;
            self.lat = lat;
            // 删除标点
            self.AMapManager.remove(self.markers);
            self.markers = [];
            // 这里通过高德 SDK 完成。
            let geocoder = new AMap.Geocoder({
              radius: 1000,
              extensions: "all"
            });

            // 获取当前点路名
            geocoder.getAddress([lng ,lat], function(status, result) {
              if (status === 'complete' && result.info === 'OK') {
                if (result && result.regeocode) {
                  // 点击地图后 显示标点
                  let marker = new AMap.Marker({
                      position: [lng, lat],
                      map: self.AMapManager
                  });
                  marker.setAnimation('AMAP_ANIMATION_DROP');
                  marker.content = result.regeocode.formattedAddress;
                  marker.on('click', self.showInfoWindow);
                  marker.emit('click', {target: marker});
                  self.markers.push(marker);
                  // self.$nextTick();
                }
              }
            });
          },
          init(o) {
            // 获取高德地图实例
            self.AMapManager = o;
          }
        },
        lng: 0,
        lat: 0,
      }
    },
    mounted() {

    },
    methods: {
      // 确定搜索结果后显示的标点信息
      onSearchResult(pois) {
        let self = this;
        let latSum = 0;
        let lngSum = 0;
        // 这里通过高德 SDK 完成。
        let geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        });
        // 删除标点
        self.AMapManager.remove(self.markers);
        self.markers = [];
        if (pois.length > 0) {
          pois.forEach(poi => {
            let {lng, lat} = poi;
            let address = '';
            lngSum += lng;
            latSum += lat;

            // 获取当前点路名
            geocoder.getAddress([lng ,lat], function(status, result) {
              if (status === 'complete' && result.info === 'OK') {
                if (result && result.regeocode) {
                  address = result.regeocode.formattedAddress;
                  // 添加标点
                  let marker = new AMap.Marker({
                      position: [lng, lat],
                      map: self.AMapManager
                  });
                  marker.setAnimation('AMAP_ANIMATION_DROP');
                  marker.content = address;
                  marker.on('click', self.showInfoWindow);
                  marker.emit('click', {target: marker});
                  self.markers.push(marker);
                  // this.$nextTick();
                }
              }
            });
          });
          let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length
          };
          this.mapCenter = [center.lng, center.lat];
        }
      },
      showInfoWindow(e) {
        let self = this;
        let content = e.target.content;
        let {lat, lng} = e.target.G.position;
        this.$store.state.publishFormSendData.location = {
          content: content,
          lat: lat,
          lng: lng
        };
        let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
        // self.mapConfirm() 为 main.js定义的全局函数  不然使用不了
        let html =
        `<div>${content}</div><button onclick="mapConfirm()">确定</button>`;

        infoWindow.setContent(html);
        infoWindow.open(self.AMapManager, e.target.getPosition());
      },
      onClickConfirmAddress() {
        alert(123)
      }
    }
  }
</script>

<style scoped="scoped">
#container {
  width: 100%;
  height: 100%;
}
.map-box {
  height: 100%;
}
.amap-demo {
  height: 100%;
  width: 100%;
}
#container {
  width: 100%;
  height: 100%;
}
.search-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
</style>